<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频点播器</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        #sp {
            width: 920px;
            /*宽*/
            height: 670px;
            /*高*/
            margin: 0px auto;
            /*水平居中*/
        }
        
        #sp .Con {
            width: 580px;
            height: 670px;
            float: left;
            /*左浮动*/
            background: url("images/sp.jpg") no-repeat center;
            position: relative;
        }
        
        #sp .List {
            width: 180px;
            height: 670px;
            float: right;
            /*右浮动*/
        }
        
        #sp .Con .avi {
            width: 525px;
            height: 331px;
            position: absolute;
            /*绝对定位*/
            left: 27px;
            top: 98px;
        }
        
        #sp .List ul li {
            width: 171px;
            height: 152px;
            list-style-type: none;
            position: relative;
            background: url(images/xsp.jpg);
            margin-top: 10px;
            cursor: pointer;
        }
        
        .sp_pic {
            width: 151px;
            height: 94px;
            background: red;
            position: absolute;
            left: 10px;
            top: 8px;
        }
        
        .List ul li img.play {
            position: absolute;
            left: 65px;
            top: 30px;
            display: none;
        }
        
        .List ul li:hover img.play {
            display: block;
        }
    </style>

</head>

<body>
    <div id="sp">
        <!-- 视频内容开始 -->
        <div class="Con">
            <div class="avi">
                <iframe src="//player.bilibili.com/player.html?aid=499116366&bvid=BV1EK411n7bR&cid=218347751&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height="331px" width="525px"> </iframe>
            </div>
        </div>

        <!-- 视频列表开始 -->
        <div class="List">
            <ul>
                <li>
                    <div class="sp_pic">
                        <img src="images/sp_pic1.png" width="151px" height="94px" dataSrc="//player.bilibili.com/player.html?aid=13018136&bvid=BV1tx411p7hy&cid=21375914&page=1">
                    </div>
                    <img src="images/mvPlayIcon.png" class="play">
                </li>
                <li>
                    <div class="sp_pic">
                        <img src="images/sp_pic2.jpg" width="151px" height="94px" dataSrc="//player.bilibili.com/player.html?aid=29353549&bvid=BV1gs411M7LM&cid=51010798&page=1">
                    </div>
                    <img src="images/mvPlayIcon.png" class="play">
                </li>
                <li>
                    <div class="sp_pic">
                        <img src="images/sp_pic3.jpg" width="151px" height="94px" dataSrc="//player.bilibili.com/player.html?aid=49786905&bvid=BV1xb411L7pC&cid=87171150&page=1">
                    </div>
                    <img src="images/mvPlayIcon.png" class="play">
                </li>
                <li>
                    <div class="sp_pic">
                        <img src="images/sp_pic4.jpg" width="151px" height="94px" dataSrc="//player.bilibili.com/player.html?aid=27949066&bvid=BV1zs411A7wV&cid=48277901&page=1">
                    </div>
                    <img src="images/mvPlayIcon.png" class="play">
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(".List ul li").click(function() {
            var aviSrc = $(this).find(".sp_pic img").attr("dataSrc");
            // alert(aviSrc);
            // $(".avi embed").attr("src", aciSrc);
            $(".avi").html("<iframe src='" + aviSrc + "' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen='true' height='331px' width='525px'></iframe>")
        });
    </script>
</body>

</html>